<template>
	<div class="list">
		<el-tabs v-model="activeName" type="border-card">
			<el-tab-pane label="待审核" name="first">
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar">
					<el-input placeholder="请输入内容" v-model="filters2.name" class="search">
						<el-button slot="append" icon="el-icon-search" @click="getTableData2"></el-button>
					</el-input>
				</el-col>
				<el-table :data="tableData2" v-loading="listLoading" stripe style="width: 100%">
					<el-table-column prop="unauth_id" label="ID" width="50"></el-table-column>
					<el-table-column prop="product_name" label="作品名称"></el-table-column>
					<el-table-column prop="site_name" label="盗版网站名称"></el-table-column>
					<el-table-column prop="url" label="盗版链接"></el-table-column>
					<el-table-column prop="username" label="录入用户"></el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<span class="hover" @click="requiresAllow(scope.$index, scope.row, 1)">通过</span>
							<span class="hover" @click="requiresAllow(scope.$index, scope.row, 2)">不通过</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar" style="padding-top:10px">
					<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量密码重置</el-button> -->
					<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange2" :page-size="10" :total="total2" style="float:right;">
					</el-pagination>
				</el-col>
			</el-tab-pane>
			<el-tab-pane label="已审核" name="second">
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar">
					<el-input placeholder="请输入内容" v-model="filters1.name" class="search">
						<el-button slot="append" icon="el-icon-search" @click="getTableData1"></el-button>
					</el-input>
				</el-col>
				<el-table :data="tableData1" v-loading="listLoading" stripe style="width: 100%">
					<el-table-column prop="unauth_id" label="ID" width="50"></el-table-column>
					<el-table-column prop="product_name" label="作品名称"></el-table-column>
					<el-table-column prop="site_name" label="盗版网站名称"></el-table-column>
					<el-table-column prop="url" label="盗版链接"></el-table-column>
					<el-table-column prop="status_zh" label="审核状态"></el-table-column>
					<el-table-column prop="username" label="录入用户"></el-table-column>
					<el-table-column label="审核员">
						<template slot-scope="scope">
							{{scope.row.check_username?scope.row.check_username:''}}
						</template>
					</el-table-column>
					<el-table-column prop="check_time" label="审核时间">
						<template slot-scope="scope">
							{{scope.row.check_time?scope.row.check_time:''}}
						</template>
					</el-table-column>
				</el-table>
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar" style="padding-top:10px">
					<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量密码重置</el-button> -->
					<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange1" :page-size="10" :total="total1" style="float:right;">
					</el-pagination>
				</el-col>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { uuaGetchecklist,uuaCheck,uuaGetcheckdetail } from '@/api';

	export default {
		data() {
			return {
				activeName: 'first',
				// 翻页
				total1: 0,
				page1: 1,

				total2: 0,
				page2: 1,
				listLoading: false,
				
				//以上是自己测试
				filters1: {
					name: '',
				},
				filters2: {
					name: '',
				},

				// 表格
				tableData1: [],
				tableData2: [],

			}
		},
		mounted() {
			this.getTableData1();
			this.getTableData2();
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			requiresAllow(index,row,status){
				let para = {
					uid: this.crocUser.uid,
					unauth_id: row.unauth_id,
					status: status,
				};

				uuaCheck(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.$message.success(res.msg);
						this.getTableData1();
						this.getTableData2();
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			// 翻页 
			handleCurrentChange1(val) {
				this.page1 = val;
				this.getTableData1();
			},
			handleCurrentChange2(val) {
				this.page2 = val;
				this.getTableData2();
			},
			// 已审核
			getTableData1(){
				this.listLoading = true;
				let para = {
					name: this.filters1.name,
					status: 1,
					uid: this.crocUser.uid,
					page: this.page1,
					pagesize: 10,
				};

				uuaGetchecklist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total1 = res.total;
						this.tableData1 = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			// 待审核
			getTableData2(){
				this.listLoading = true;
				let para = {
					name: this.filters2.name,
					status: 0,
					uid: this.crocUser.uid,
					page: this.page2,
					pagesize: 10,
				};

				uuaGetchecklist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total2 = res.total;
						this.tableData2 = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},

			// 重置 
			resetForm(formName){
				this.$refs[formName].resetFields();
			},
		}
	}

</script>

<style scoped lang="scss">
</style>